<template>
  <div class="search-w">
    <!--1 顶部栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.go(-1)" />
    <!--2 搜索  input -->
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="$router.push({ path: '/searchResults', query: { value } })"
      @input="onInput"
    >
      <template #action>
        <div
          @click="$router.push({ path: '/searchResults', query: { value } })"
        >
          搜索
        </div>
      </template>
    </van-search>
    <!--3 推荐搜索 -->
    <van-cell-group>
      <van-cell
        v-for="(item, index) in showList"
        :key="index"
        icon="search"
        @click="
          $router.push({
            path: '/searchResults',
            query: { value: suggestionList[index] }
          })
        "
      >
        <template #title>
          <div v-html="item"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!--4 历史记录 -->
    <van-cell-group>
      <van-cell title="历史记录" />
      <van-cell
        v-for="item in historyList"
        :key="item"
        :title="JSON.parse(item).value"
        @click="
          $router.push({
            path: '/searchResults',
            query: { value: JSON.parse(item).value }
          })
        "
      >
        <!--  因为点击事件冒泡 这里用到了事件修饰符 stop 阻止事件冒泡 -->
        <template #right-icon>
          <van-icon
            size="20"
            @click.stop="deleteSearch"
            name="close"
            class="search-icon"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
import { getSuggestion, searchRecords, deleteSearchRecords } from './home.js'

export default {
  name: 'search',
  data () {
    return {
      value: '', // 双向绑定 搜索框输入的内容
      suggestionList: [], // 推荐数据列表
      historyList: [], // 历史搜索记录
      timeId: null // 防抖定时器
    }
  },
  // 生命周期钩子
  async created () {
    // 获取历史搜索记录
    let res = await searchRecords()
    // console.log(res)
    // 绑定数据
    this.historyList = res.data.data.keywords
  },
  methods: {
    //  搜索
    onSearch () {
      //   console.log(111)
    },
    // 搜索推荐
    onInput () {
      // 搜索框防抖处理
      // 清除上一次的定时器 以最后一次为准
      clearTimeout(this.timeId)
      // 开启防抖定时器  这里的因为await是在定时器回调函数中使用
      // 所以async要修饰定时器回调函数
      this.timeId = setTimeout(async () => {
        //   非空判断
        if (this.value == '') {
          //   当输入框内容为空 清空推荐数据列表
          this.suggestionList = []
          return
        }
        // 发送请求 获取推荐信息
        let res = await getSuggestion({ q: this.value })
        console.log(res)
        //绑定数据
        this.suggestionList = res.data.data.options
      }, 500)
    },
    async deleteSearch () {
      let res = await deleteSearchRecords()
      // console.log(res)
      //   判断返回的状态码是不是204
      if (res.status == 204) {
        //   如果是204 清空历史记录列表
        this.$toast.success('删除成功')
        // 清空搜索记录数组
        this.historyList = []
      } else {
        this.$toast.fail('操作失败')
      }
    }
  },
  computed: {
    //   使用正则表达式完成推荐词高亮效果
    showList () {
      // 定义一个正则 参数一是输入的内容 参数二是修饰符 代表全局匹配 不区分大小写
      let reg = new RegExp(this.value, 'gi')
      //   使用数组的map方法 遍历每一项内容
      return this.suggestionList.map(value =>
        //   replace方法第二个参数也可以传一个函数 match代表的就是匹配到的所有内容
        value.replace(reg, match => `<span style="color:red">${match}</span>`)
      )
    }
  }
}
</script>

<style lang="less">
.search-w {
  .van-nav-bar {
    .van-nav-bar__content {
      background-color: #fff;
      .van-nav-bar__left {
        .van-icon-arrow-left {
          color: #1989fa;
        }
      }
      .van-nav-bar__title {
        color: #000;
      }
    }
  }
}
</style>
